<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS3图片动态提示效果</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<figure class="test1">
<img src="images/1.jpg">
<figcaption>
<h2>图片标题</h2>
<p>图片注解1</p>
<p>图片注解2</p>
<p>图片注解3</p>
</figcaption>
</figure>

<figure class="test2">
<img src="images/5.jpg">
<figcaption>
<h2>旋转动画</h2>
<p>飞来飞去，飞来飞舞</p>
<div></div>
</figcaption>
</figure>

<figure class="test3">
<img src="images/3.jpg">
<figcaption>
<h2>斜切动画</h2>
<p>斜切动画图片注解</p>
</figcaption>
</figure>


<figure class="test4">
<img src="images/6.jpg">
<figcaption>
<h2>缩放动画</h2>
<p>飞来飞去，飞来飞舞</p>
<div></div>
</figcaption>
</figure>


<figure class="test5">
<img src="images/2.jpg">
<figcaption>
<h2>图片标题</h2>
<p>斜角动画</p>
<div></div>
</figcaption>
</figure>
 
<figure class="test6">
<img src="images/4.jpg">
<figcaption>
<h2>图片标题</h2>
<p>线性动画</p>
<div class="line1"></div>
<div class="line2"></div>
</figcaption>
</figure>
	
</body>
</html>